<template>
	<view class="content">
		<view class="index-box">
			<view class="button" @click="toUrl('/pages/componentsB/cart/cart')">
				<text :class="'bg-'+themeColor.name">购物车</text>
			</view>
			<view class="button" @click="toUrl('/pages/componentsB/swiper/swiper')">
				<text :class="'bg-'+themeColor.name">3D轮播</text>
			</view>
			<view class="button" @click="toUrl('/pages/componentsB/theme/theme')">
				<text :class="'bg-'+themeColor.name">切换主题</text>
			</view>
			<view class="button" @click="toUrl('/pages/componentsB/musicPlayer/musicPlayer')">
				<text :class="'bg-'+themeColor.name">音乐播放器</text>
			</view>
			<view class="button" @click="toUrl('/pages/componentsB/SlideVideo/SlideVideo')">
				<text :class="'bg-'+themeColor.name">滑动视频</text>
			</view>
			<view class="button" @click="toUrl('/pages/componentsB/movableArea/movableArea')">
				<text :class="'bg-'+themeColor.name">拖拽</text>
			</view>
			<view class="button" @click="toUrl('/pages/componentsB/drawer/drawer')">
				<text :class="'bg-'+themeColor.name">抽屉</text>
			</view>
			<view class="button" @click="toUrl('/pages/componentsB/dropDown/dropDown')">
				<text :class="'bg-'+themeColor.name">下拉菜单</text>
			</view>
			<view class="button" @click="toUrl('/pages/componentsB/lock/lock')">
				<text :class="'bg-'+themeColor.name">手势解锁</text>
			</view>
			<view class="button" @click="toUrl('/pages/componentsB/tiangou/tiangou')">
				<text :class="'bg-'+themeColor.name">舔狗日记</text>
			</view>
			<view class="button" @click="toUrl('/pages/componentsB/meiriyiwen/meiriyiwen')">
				<text :class="'bg-'+themeColor.name">每日一文</text>
			</view>
			<view class="button" @click="toUrl('/pages/componentsB/AiLisotian/AiLisotian')">
				<text :class="'bg-'+themeColor.name">聊天（小思同学）</text>
			</view>
			<view class="button" @click="toUrl('/pages/componentsB/getAddress/getAddress')">
				<text :class="'bg-'+themeColor.name">通讯录</text>
			</view>
			<view class="button" @click="toUrl('/pages/componentsB/downloadFile/downloadFile')">
				<text :class="'bg-'+themeColor.name">选择文件并下载</text>
			</view>
			<view class="button" @click="toUrl('/pages/componentsB/reading/reading')">
				<text :class="'bg-'+themeColor.name">小说阅读</text>
			</view>
			<view class="button">
				<text :class="'bg-'+themeColor.name">日历</text>
			</view>
			<view class="button" @click="toUrl('/pages/componentsB/graphicvVerification/graphicvVerification')">
				<text :class="'bg-'+themeColor.name">图形验证</text>
			</view>
			<view class="button" @click="toUrl('/pages/componentsB/pickerArea/pickerArea')">
				<text :class="'bg-'+themeColor.name">地区选择器</text>
			</view>
		</view>
		<!-- <tabbar :list="vuex_tabbar" active-color="#976bf8" inactive-color="#C0C4CC"></tabbar> -->
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {

			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'vuex_tabbar'])
		},
		onShow() {},

		methods: {
			toUrl(url, isapp) { //跳转链接
				// #ifdef H5
				if (isapp) {
					this.$tip("请在App的环境下尝试", 2, 'red')
					return
				}
				// #endif
				uni.navigateTo({
					url: url
				})
			},
			// 监听轮播
			change(e) {
				// console.log(e)
			},
			toModal() {
				this.$showModal({
					content: `欢迎使用HTTP`
				}).then((data) => {
					console.log(data)
				}).catch((reject) => {
					// 取消
					console.log(reject)
				});
			}


		},

	}
</script>

<style>
	page {
		font-size: 30rpx;
	}

	.content {
		font-size: 30rpx;
	}

	.index-box {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
	}

	.button {
		width: 50%;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.button text {
		border-radius: 20rpx;
		height: 70rpx;
		line-height: 70rpx;
		width: 100%;
		display: block;
		text-align: center;
		color: #FFFFFF;
	}

	.button:nth-child(even) text {
		background-color: #4CD964;
	}

	.active {
		background: #999999;
	}
</style>
